<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>  
<c:set var="contextPath" value="<%=request.getContextPath()%>"></c:set> 
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Tables - Ace Admin</title>
	
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.js"></script>

	<script type="text/javascript">
	$(function(){
		
		//确认是否删除
		$(".del").click(function(){
			if(confirm("是否确认能删除？")){
				return true;
			}else{
				return false;
			}
		});
		
		//开启关闭
		$('.subject-status').click(function(){
			var subId = $(this).parents("td").siblings("td").eq(0).text();
			$.ajax({
				type:'POST',
				url:'${contextPath}/teacher/updateStatus',
				data:{
					subId:subId
				},
				dataType:"json",
				success:function(data){
					if(data.success){
						alert('更新状态成功');
						window.location.reload();
					}else{
						//不成功则输出错误信息
						var messageMap = data.messageMap;
						for(var key in messageMap){
							var value = messageMap[key];
							 $('#addTestFrom input[name = "' + key +'"]').after('<label class="jsr303-message-lable">' + value + '</label>');
						}
						alert('更新状态失败！-' + messageMap['message']);
					}
				}
				
			});
		})
		
		//增加科目模态框
		$('#addSubjectBtn').click(function(){
			$('#addSubjectModal').modal('show');
		});
	
		//增加科目
		$('#addSubjectSaveBtn').click(function(){
			var name = $('#addSubjectFrom input[name = "name"]').val();
			var description =  $('#addSubjectFrom input[name = "description"]').val();
			var testCount = $('#addSubjectFrom input[name = "testCount"]').val();
			var totalTime = $('#addSubjectFrom input[name = "totalTime"]').val();
			var totalScore = $('#addSubjectFrom input[name = "totalScore"]').val();
			var status;			
			if($('#addSubjectFrom input[type="checkbox"]').is(":checked")){
				status = 1;
			}else{
				status = 0;
			}
			//alert($('#addSubjectFrom input[type="checkbox"]').is(":checked"));
			
			
			$.ajax({//通过后传到后台
				type:'POST',
				url:'${contextPath}/teacher/addSubjects',
				data:{
					name:name,
					description:description,
					testCount:testCount,
					totalTime:totalTime,
					totalScore:totalScore,
					status:status
				},
				dataType:"json",
				success:function(data){
					//判断成功与否
					if(data.success){
						alert('添加成功');
						window.location.reload();
					}else{
						//不成功则输出错误信息
						var messageMap = data.messageMap;
						for(var key in messageMap){
							var value = messageMap[key];
							 $('#addTestFrom input[name = "' + key +'"]').after('<label class="jsr303-message-lable">' + value + '</label>');
						}
						alert('添加失败！-' + messageMap['message']);
					}
				}
			}); 
				
		}); 
		
		//修改科目模态框
		$('.edit-subject-btn').click(function(){
			var subId = $(this).parents("td").siblings("td").eq(0).text();
			
			$.ajax({
				type:'POST',
				url:'${contextPath}/teacher/getSubjectById',
				data:{
					subId:subId
				},
				dataType:'json',
				success:function(data){
					$('#subId').val(subId);
					$('#updateSubjectFrom input[name = "name"]').val(data.name);
					$('#updateSubjectFrom input[name = "description"]').val(data.description);
					$('#updateSubjectFrom input[name = "testCount"]').val(data.testCount);
					$('#updateSubjectFrom input[name = "totalTime"]').val(data.totalTime);
					$('#updateSubjectFrom input[name = "totalScore"]').val(data.totalScore);
					if(data.status == 1){
						$('#updateSubjectFrom input[type="checkbox"]').attr("checked",true);
					}else{
						$('#updateSubjectFrom input[type="checkbox"]').attr("checked",false);
					}
				}
			});
			
			$('#updateSubjectModal').modal('show');	
		});
		
		//保存修改信息
		$('#updateSubjectSaveBtn').click(function(){
			var subId = $('#subId').val();
			var name = $('#updateSubjectFrom input[name = "name"]').val();
			var description =  $('#updateSubjectFrom input[name = "description"]').val();
			var testCount = $('#updateSubjectFrom input[name = "testCount"]').val();
			var totalTime = $('#updateSubjectFrom input[name = "totalTime"]').val();
			var totalScore = $('#updateSubjectFrom input[name = "totalScore"]').val();
			var status;			
			if($('#updateSubjectFrom input[type="checkbox"]').is(":checked")){
				status = 1;
			}else{
				status = 0;
			}

			$.ajax({
				type:'POST',
				url:'${contextPath}/teacher/updateSubject',
				data:{
					subId:subId,
					name:name,
					description:description,
					testCount:testCount,
					totalTime:totalTime,
					totalScore:totalScore,
					status:status
				},
				dataType:'json',
				success:function(data){
					//判断成功与否
					if(data.success){
						alert('修改成功');
						window.location.reload();
					}else{
						//不成功则输出错误信息
						var messageMap = data.messageMap;
						for(var key in messageMap){
							var value = messageMap[key];
							 $('#addTestFrom input[name = "' + key +'"]').after('<label class="jsr303-message-lable">' + value + '</label>');
						}
						alert('修改失败！-' + messageMap['message']);
					}			
				}
			});
			
		});

		//删除信息
		$('.del-subject-btn').click(function(){
				if(confirm("是否确认能删除？")){
					var subId = $(this).parents("td").siblings("td").eq(0).text();
		 			$.ajax({//通过后传到后台
						type:'POST',
						url:'${contextPath}/teacher/deleteSubject',
						data:{
							subId: subId
						},
						dataType:"json",
						success:function(data){
							if(data.success){
								alert('删除成功');
								window.location.reload();
							}else{
								//不成功则输出错误信息
								var messageMap = data.messageMap;
								for(var key in messageMap){
									var value = messageMap[key];
									 $('#addTestFrom input[name = "' + key +'"]').after('<label class="jsr303-message-lable">' + value + '</label>');
								}
								alert('删除失败！-' + messageMap['message']);
							}
						}
					});
				}else{
					return false;
				}
			
		});
		
		//点击获取学生科目按钮时，读取所有学生姓名和学号
		$(".mangee-subject-student-btn").click(function(){
			//获取当前选择行的科目
			var subId = $(this).parents("td").siblings("td").eq(0).text();

			//弹出科目模态框
			$.ajax({
				type:'POST',
				url:'${contextPath}/teacher/getAllstudent',
				data:{
					subjectId:subId
				},
				dataType:"json",
				success:function(data){
					var htmlString = '';
					var selectedUser = data.selectedUser;
					//alert(data.allUser.length);
					//得到所有这个科目关联的学生
					for(var i = 0; i<data.allUser.length; i++){
						var user = data.allUser[i];
						var checked = checkSelectedUser(selectedUser, user.id) ? ' checked="checked" ' : '';
						htmlString += '<div class="checkbox">';
						htmlString += '		<label>';
						htmlString += '			<input name="subjectStudents" class="ace ace-checkbox-2" type="checkbox" value="'
												+ user.id  + '" ' + checked + '/>';
						htmlString += '			<span class="lbl">' + user.name + '</span>';
						htmlString += '		</label>';
						htmlString += '</div>';
					}
					//把所有学生加入弹出框 subjectStudentModal 里面的内容去，即subjectStudentContext里面
					$('#subjectStudentContext').html(htmlString);
					$('#subjectId').val(subId);
				}
			});
			
			var checkSelectedUser = function(selectedUser,userId){
				var flag = false;
				$.each(selectedUser,function(index,item){
					if(item == userId){
						 flag = true;
					}
				});
				return flag;
			}
			
			$('#modalSubjectName').text($(this).parent("td").siblings("td").eq(1).text());
			$('#subjectStudentModal').modal('show');
			
		});
		
		//修改学生的勾选后，点击保存按钮
		$('#subjectStudentSaveBtn').on('click',function(){
			var subjectStudents = [];
			//获取所有当前已经勾选的学生的学号
			for(var i = 0; i < $('input[name="subjectStudents"]:checked').length; i++){
				subjectStudents[i] = $($('input[name="subjectStudents"]:checked')[i]).val();
			}
			$.ajax({
				type:'POST',
				url:'${contextPath}/teacher/saveSubjectStudents',
				data:{
					subjectStudents:subjectStudents,
					subjectId:$('#subjectId').val()
				},
				dataType:"json",
				success:function(data){
					//判断成功与否
					//前台代码就这样
					if(data.success){
						alert('成功');
						$('#subjectStudentModal').modal('hide');
					}else{
						alert('失败');
					}
				}
			});
		});
		
		
	});
	
	</script>
	
</head>
<body class="no-skin">
	<!-- /section:settings.box -->
	<div class="page-content-area">
		<a id="addSubjectBtn" class="btn btn-primary"><i class="ace-icon fa fa-plus ">&nbsp;&nbsp;添加科目</i></a>
		<div class="row">
			<div class="col-xs-12">
				<!-- PAGE CONTENT BEGINS -->
				<div class="row">
					<div class="col-xs-12">
						<table id="sample-table-1" class="table table-striped table-bordered table-hover">
							<thead>
								<tr>
									<th>科目编号</th>
									<th>科目名</th>
									<th>科目描述</th>
									<th>科目题数</th>
									<th>总时长</th>
									<th>满分总分</th>
									<th>是否开启考试</th>
									<th>操作</th>
								</tr>
							</thead>

							<tbody>
							<c:forEach items="${subjectList }" var="Subject">
								<tr>
									<td>${Subject.subId }</td>
									<td>${Subject.name }</td>
									<td>${Subject.description }</td>
									<td>${Subject.testCount }</td>
									<td>${Subject.totalTime }</td>
									<td>${Subject.totalScore }</td>
									<td>
										<c:choose>
											<c:when test="${Subject.status == 0 }">
												<input name="switch-field-1" subid="${Subject.subId }" class="ace ace-switch ace-switch-6 subject-status" type="checkbox"/>
												<span class="lbl"></span>
											</c:when>
											<c:otherwise>										
												<input name="switch-field-1" subid="${Subject.subId }" checked class="ace ace-switch ace-switch-6 subject-status" type="checkbox"/>
												<span class="lbl"></span>
											</c:otherwise>
										</c:choose>
									</td>
									<td>
									<a title="修改科目" class="btn btn-primary btn-xs edit-subject-btn"><i class="ace-icon fa fa-pencil"></i></a>
									<a title="删除科目" class="btn btn-primary btn-xs del-subject-btn"><i class="ace-icon fa fa-trash-o"></i></a>
									<a title="管理科目学生" class="btn btn-primary btn-xs  mangee-subject-student-btn"><i class="ace-icon fa fa-user"></i></a>
									</td>
								</tr>
							</c:forEach>

							</table>
						</div>
					</div>
				</div>
				
				<!-- 添加科目 -->
				<div class="modal fade" id="addSubjectModal" tabindex="-1" role="dialog" aria-labelledby="showTestModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
									&times;
								</button>
								<h4 class="modal-title" id="showTestModalLabel">
									添加科目
								</h4>
							</div>
							<div class="modal-body">
								<form id="addSubjectFrom" method="post">
								<p><label style="text-align:right; width:150px;">科目名:</label>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="name" style="height:23px" /></p>
								<p><label style="text-align:right; width:150px;">科目描述:</label>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="description" style="height:23px"/></p>
								<p><label style="text-align:right; width:150px;">科目总题数:</label>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="testCount" style="height:23px"/></p>
								<p><label style="text-align:right; width:150px;">总时长:</label>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="totalTime" style="height:23px"/></p>
								<p><label style="text-align:right; width:150px;">满分总分:</label>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="totalScore" style="height:23px"/></p>
								<p><label style="text-align:right; width:150px;">是否开启:</label>&nbsp;&nbsp;&nbsp;&nbsp;<input name="status" class="ace ace-switch ace-switch-6" type="checkbox"/><span class="lbl"></span></p>
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭
								</button>
								<button id="addSubjectSaveBtn" type="button" class="btn btn-primary">
									保存
								</button>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal -->
				</div>
				
				<!-- 修改科目 -->
				<div class="modal fade" id="updateSubjectModal" tabindex="-1" role="dialog" aria-labelledby="showTestModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
									&times;
								</button>
								<h4 class="modal-title" id="showTestModalLabel">
									修改科目
								</h4>
							</div>
							<div class="modal-body">
								<form id="updateSubjectFrom" method="post">
								<p><label style="text-align:right; width:150px;">科目名:</label>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="name" style="height:23px" /></p>
								<p><label style="text-align:right; width:150px;">科目描述:</label>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="description" style="height:23px"/></p>
								<p><label style="text-align:right; width:150px;">科目总题数:</label>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="testCount" style="height:23px"/></p>
								<p><label style="text-align:right; width:150px;">总时长:</label>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="totalTime" style="height:23px"/></p>
								<p><label style="text-align:right; width:150px;">满分总分:</label>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="totalScore" style="height:23px"/></p>
								<p><label style="text-align:right; width:150px;">是否开启:</label>&nbsp;&nbsp;&nbsp;&nbsp;<input name="status" class="ace ace-switch ace-switch-6" type="checkbox"/><span class="lbl"></span></p>
								<input type="hidden" id="subId"/>
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭
								</button>
								<button id="updateSubjectSaveBtn" type="button" class="btn btn-primary">
									保存
								</button>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal -->
				</div>
				
				<!-- 管理学生科目模态框 -->
				<div class="modal fade" id="subjectStudentModal" tabindex="-1" role="dialog" aria-labelledby="showTestModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
									&times;
								</button>
								<h4 class="modal-title" id="showTestModalLabel">
									管理学生科目：<label id="modalSubjectName"></label>
								</h4>
							</div>
							<div class="modal-body">
								<input type="hidden" id="subjectId" />
								<div id="subjectStudentContext" class="control-group">
								</div>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭
								</button>
								<button id="subjectStudentSaveBtn" type="button" class="btn btn-primary" >
									保存
								</button>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal -->
				</div>
				
				
				<div id="modal-table" class="modal fade" tabindex="-1">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header no-padding">
								<div class="table-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
										<span class="white">&times;</span>
									</button>
									Results for "Latest Registered Domains
								</div>
							</div>

							<div class="modal-body no-padding">
								<table class="table table-striped table-bordered table-hover no-margin-bottom no-border-top">
									<thead>
										<tr>
											<th>Domain</th>
											<th>Price</th>
											<th>Clicks</th>

											<th>
												<i class="ace-icon fa fa-clock-o bigger-110"></i>
												Update
											</th>
										</tr>
									</thead>

									<tbody>
										<tr>
											<td>
												<a href="#">ace.com</a>
											</td>
											<td>$45</td>
											<td>3,330</td>
											<td>Feb 12</td>
										</tr>

										<tr>
											<td>
												<a href="#">base.com</a>
											</td>
											<td>$35</td>
											<td>2,595</td>
											<td>Feb 18</td>
										</tr>

										<tr>
											<td>
												<a href="#">max.com</a>
											</td>
											<td>$60</td>
											<td>4,400</td>
											<td>Mar 11</td>
										</tr>

										<tr>
											<td>
												<a href="#">best.com</a>
											</td>
											<td>$75</td>
											<td>6,500</td>
											<td>Apr 03</td>
										</tr>

										<tr>
											<td>
												<a href="#">pro.com</a>
											</td>
											<td>$55</td>
											<td>4,250</td>
											<td>Jan 21</td>
										</tr>
									</tbody>
								</table>
							</div>

							<div class="modal-footer no-margin-top">
								<button class="btn btn-sm btn-danger pull-left" data-dismiss="modal">
									<i class="ace-icon fa fa-times"></i>
									Close
								</button>

								<ul class="pagination pull-right no-margin">
									<li class="prev disabled">
										<a href="#">
											<i class="ace-icon fa fa-angle-double-left"></i>
										</a>
									</li>

									<li class="active">
										<a href="#">1</a>
									</li>

									<li>
										<a href="#">2</a>
									</li>

									<li>
										<a href="#">3</a>
									</li>

									<li class="next">
										<a href="#">
											<i class="ace-icon fa fa-angle-double-right"></i>
										</a>
									</li>
								</ul>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal-dialog -->
				</div><!-- PAGE CONTENT ENDS -->
			</div><!-- /.col -->
		</div><!-- /.row -->
	</body>
</html>